window.addEventListener("load", function () {
    /* ---------------------API分类 渲染数据----------------------------------*/
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ]
    // 遍历数据,渲染到ul
    apiTypeData.forEach(function (v) {
        $("#classify").innerHTML += `
            <li class="${v.isnew && "fw-b"}" title="${v.keyword}">${v.name}</li>
        `
        // v.isnew && "fw-b" --- 如果v.isnew为true,就执行"fw-b",否则不作处理
    })

    /* ------------------------API分类 激活样式---------------------------------*/
    // 获取li节点
    const li = $("#classify li")
    // console.log(li);
    // 获取input节点
    const input = $(".search input")
    const span = $(".search span")
    // console.log(li);    
    // 遍历每个li
    li.forEach(function (v) {
        // 为每个li绑定点击事件
        v.addEventListener("click", function (e) {
            // 排他思想,点击的时候把所有li的激活样式都清除
            li.forEach(function (v) {
                v.classList.remove("on")
            })
            // 然后给被点击的那个添加激活样式
            this.classList.add("on")
            input.value = `${this.title}`
            span.innerHTML = this.textContent
        })
    })



    /* ------------------------API list 导入数据------------------------*/
    //API列表区域 模拟服务器返回的数据
    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    ]
    /* 
        <li>
            <p>
                <img src="../images/API_01.jpg" alt="">
            </p>
            <p>2021出行防疫政策指南</p>
            <p>免费</p>
            <p>申请数据</p>
        </li>
    */
    const ul = $("#APIlist .apiList ul")
    // ------------事件委派,委派给ul,点击申请数据a标签,弹出"去登录"----------
    ul.addEventListener("click", function (e) {
        if (e.target.nodeName === "A") {
            e.preventDefault();
            $("#mask").style.display = "block"
            // 禁用滚动条
            document.body.style.overflow = "hidden";
        }
    })
    // -------------------------点击蒙层关闭------------------
    $("#mask").addEventListener("click", function (event) {
        // event.target 事件源
        // console.dir(event.target);
        if (event.target.id === "mask") {
            this.style.display = "none";
            document.body.style.overflow = "auto";
        }
    });
    // -------------------调用切换选项卡函数-------------
    const option = {
        // 选择器
        liSelector: "#chose li",
        divSelector: "#login .loginCont",
        // 类名
        liClassName: "active",
        divClassName: "on",
        // index: 0
    }

    tabChange(option)

    // 表单验证
    $(".loginCont input")[0].addEventListener("blur", function () {
        const req = /^[a-z0-9]{2,10}$/;
        if (!req.test($("input")[0].value)) {
            alert("请输入正确的用户名")
        }
        // (!req.test($("input")[0].value)) && alert("请输入正确的用户名")
    })
    $(".loginCont input")[1].addEventListener("blur", function () {
        const req = /^[a-zA-Z0-9_]{4,12}$/;
        // if (!req.test($("input")[1].value)) {
        //     alert("请输入正确的密码")
        // }
        (!req.test($("input")[1].value)) && alert("请输入正确的密码")
    })
    // 遍历数据,渲染到ul
    // listDataArr.forEach(function (v) {
    //     ul.innerHTML += `
    //         <li>
    //             <span class="${v.isSpecial ? "special" : ""}"></span>
    //             <p>
    //                 <img src=../images/${v.img}>
    //             </p>
    //             <p>${v.name}</p>
    //             <p class="${v.isSpecial ? "red" : ""}">${v.price}</p>
    //             <p class="show">申请数据</p>
    //         </li>
    //     `
    // })

    /* ---------------------API list 激活样式 没必要用js做,太麻烦--------------------*/
    // 鼠标移入,申请数据从底部滑出
    // const show = $("#APIlist ul li .show")
    // const liList = $("#APIlist ul li")
    // liList.forEach(function (v) {
    //     v.addEventListener("mouseover", function () {
    //         v.children[4].classList.add("showUp")
    //     })
    //     v.addEventListener("mouseout", function () {
    //         v.children[4].classList.remove("showUp")
    //     })
    // })

    /* ------------------------API list 创建页码-------------------------*/
    // 每页显示的数据为几条
    const pageSize = 5;
    // 数据总共有几条
    const datas = listDataArr.length;
    // 需要生成几个页码
    const pages = datas / pageSize;
    // 创建页码i
    for (let i = 1; i <= pages; i++) {
        // console.log(this); // this指向window
        // 创建li
        const liNode = this.document.createElement("li");
        // 把页码渲染到li
        liNode.textContent = i;
        // 添加默认激活样式
        i === 1 && (liNode.classList = "active")
        // 把li追加到ul里
        $(".page ul").append(liNode);
    }
    // ------------页面加载时,就渲染第一页的数据---------------
    render(1, pageSize)

    /* ------------------点击页码,添加激活样式,渲染数据-----------------------*/
    // 事件委派,给ul绑定事件,通过e.target找到触发事件的li
    $(".page ul").addEventListener("click", function (e) {
        if (e.target.nodeName === "LI") { // nodeName 节点名字大写哦 localName 节点名字小写哦
            // 排他思想,点击的时候把所有li的激活样式都清除
            $(".page ul li").forEach(function (v) {
                v.classList.remove("active")
            })
            // 然后给被点击的那个添加激活样式
            e.target.classList.add("active")
        }
        // 拿到点击的页码,点第几页就渲染第几页的数据
        const pagenation = Number(e.target.textContent)
        render(pagenation, pageSize)
    })

    // -----------------封装渲染函数render()-----------------
    function render(pagenation, pageSize) {
        // 开始索引
        const startIndex = (pagenation - 1) * pageSize
        // 结束索引
        const endtIndex = pagenation * pageSize
        // 通过slice方法找到数据对应的索引,存到result变量里
        const result = listDataArr.slice(startIndex, endtIndex)
        // console.log(result);
        // 先把API list的ul清空
        $(".apiList ul").innerHTML = ""
        // 遍历数据,渲染到API list的ul里
        result.forEach(function (v) {
            $(".apiList ul").innerHTML += `
            <li>
                <span class="${v.isSpecial ? "special" : ""}"></span>
                <p>
                    <img src=../images/${v.img}>
                </p>
                <p>${v.name}</p>
                <p class="${v.isSpecial ? "red" : ""}">${v.price}</p>
                <p class="show"><a href="#">申请数据</a></p>
            </li>
        `
        })
    }



    //---------------- 返回顶部 ---------------------
    // const toTop = $(".toTop")
    // toTop.onclick = function () {
    //     scrollTo({
    //         top: 0,
    //         behavior: "smooth",
    //     });
    // };
    // //返回顶部按钮显示,隐藏
    // // 窗口滚动事件
    // window.onscroll = function () {
    //     if (scrollY >= 200) {
    //         toTop.style.display = "block";
    //     } else {
    //         toTop.style.display = "none";
    //     }
    // };

})// 窗口加载事件 尾巴